{include file="public/header"}

    <style scoped>
        .el-select-dropdown {
        padding: 0;
        }
        .input-with-select{
            width: 1140px;
        }
        .select-with-select{
            content: '*';
            color: red;
            margin-right: 4px;
        }
        .truncate {
           display: inline-block;   /* 必须设置为块级元素 */
            max-width: 203px;        /* 限制最大宽度（按需调整） */
            white-space: nowrap;     /* 禁止换行 */
            overflow: hidden;        /* 隐藏溢出内容 */
            text-overflow: ellipsis;  /* 显示省略号 */
         }
       .price-range{
        
           font-size: 17px;
       }
       .priceRange_table{
           margin-top: 40px;
           margin-left: 20px;
           width: 80%;
       }   
       .blue_color{
          margin-top: 6px;
          margin-left: 10px;
          background-color: #c6e8ff;
          width: 15px;
          height: 15px;  
       }   
       .yellow_color{
            margin-top: 6px;
            margin-left: 10px;
            background-color: #faecd8;
            width: 15px;
            height: 15px;      
       }
       .red_color{
            margin-top: 6px;
            margin-left: 10px;
            background-color: #fde2e2;
            width: 15px;
            height: 15px;  
       }
    </style>
     {include file="public/style"}
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>产品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品上下架列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
        <el-card >
            <div style="display: flex;align-items: center;justify-content: flex-start;">
                <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">                
                    <el-form-item label="本地款号">                     
                        <el-input v-model="searchForm.localsku" placeholder="请输入本地款号" clearable filterable></el-input>
                    </el-form-item>                    
                    <el-form-item label="店铺">                                     
                          <el-select v-model="searchForm.shop_id" placeholder="请选择店铺" filterable clearable>
                            <el-option v-for="item in shoplist" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                     <el-form-item label="国家">                   
                        <el-select v-model="searchForm.site" placeholder="请选择国家" filterable clearable>
                             <el-option v-for="item in countrys" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item label="是否上架">
                        <el-select v-model="searchForm.status" placeholder="请选择上架状态" filterable clearable>
                            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                    
                    <el-form-item>
                        <el-button type="primary"  size="small" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                    </el-form-item>          
                  </el-form>                 
                
                <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                        <!-- <el-button  type="primary"   @click="batchlisting" size="small"  icon="el-icon-edit" >批量上架</el-button>       
                         <el-button    @click="shelf" size="small"  icon="el-icon-edit" >批量下架</el-button>   -->
                        <el-popover placement="top-start" title="筛选字段" width="700" trigger="hover">
                            <div>
                                <el-row>
                                    <el-col :span="8" v-for="(item, key) in filterParams" :key="item.name">
                                        <div style="margin:4px" v-if="!item.area">
                                            <el-switch v-model="item.visible"></el-switch>
                                            <span>{{item.name}}</span>
                                        </div>
                                    </el-col>
                                </el-row> 
                            </div>                
                            <el-button slot="reference" type="success" size="mini">筛选字段</el-button>
                        </el-popover>        
                </div>
            </div>

            <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border    @selection-change="handleSelectionChange">
                 <el-table-column    type="selection"      width="55">    </el-table-column>             
                <el-table-column   v-if="filterParams.localsku.visible" prop="localsku" label="本地款号" width="130">
                    <template v-slot="{row}">                                          
                            <div style="font-size: 15px" >
                                <a :href="'/admin/products/dateils?id='+row.id" target="_blank" >{{row.localsku}} </a> <br>
                            </div>
                    </template>
                </el-table-column>  
                <el-table-column   v-if="filterParams.img.visible"  prop="img"  label="产品图片" width="100">
                    <template v-slot="{row}">
                        <el-image :preview-teleported="true" :z-index="999999" :src="row.img" style="width:100;height:50px" :preview-src-list="[row.img]"   referrerpolicy="no-referrer"  /></el-image></el-link>
                    </template>
                </el-table-column> 
              
                <el-table-column   v-if="filterParams.name_en.visible"   prop="name_en" label="商品英文名称" > </el-table-column>   
                 <el-table-column  v-if="filterParams.title.visible"  prop="title" label="商品中文名称"  width="420">
                       <template v-slot="{row}">
                           <el-link type="primary"  :href="row.product_link" target="_blank">{{row.title}} </el-link>
                    </template>
                 </el-table-column>   
                <el-table-column   v-if="filterParams.shop_name.visible"  prop="shop_name" label="上架店铺"  width="100"> </el-table-column>   
                <el-table-column   v-if="filterParams.site.visible"  prop="site" label="产品销售站点" width="120">
                     <template v-slot="{row}"> 
                          <span v-if="row.site">
                                ({{row.country}}){{row.site}}
                          </span>                          
                     </template>
                </el-table-column>   
                <el-table-column   v-if="filterParams.status.visible" prop="status"  label="是否上下架" width="120"> 
                        <template v-slot="{row}">
                            <span v-if="row.status===1">
                                <el-tag type="success">上架</el-tag>
                             </span>
                             <span   v-if="row.status===0">
                                <el-tag type="danger">下架</el-tag>                                                
                            </span>  
                             <span   v-if="row.status===2">
                                <el-tag type="info">还没有上架</el-tag>                                                
                            </span>  
                    </template>                          
                </el-table-column>      
                <el-table-column v-if="filterParams.createtime.visible"   prop="createtime" label="上架时间" width="180"> </el-table-column>      
                <el-table-column  fixed="right" label="操作" width="120">
                    <template v-slot="{row}">
                        <el-button type="primary"  plain  icon="el-icon-edit"  v-if="row.status===0 || row.status===2 "  @click="listing(row)" >上架 </el-button>
                        <el-button type="danger"  plain   icon="el-icon-delete" v-if="row.status===1"   @click="cancel(row.id)">下架</el-button>             
                    </template>
                </el-table-column>
            </el-table>

            <!-- page -->            
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>  
        </el-card>        
       

        <!-- 上架弹窗 -->
        <el-dialog :title="title" :visible.sync="islistVisible " width="1300px" :close-on-click-modal="false">
            <el-form :inline="true" :model="createForm" size="mini"  :rules="islistProductbuterules"  ref="refeditForm"  :popper-append-to-body="false"  >   
                  <div>
                    <el-form-item label="中文标题"   label-width="80px" label-position="right">
                            <el-input v-model="chaintitle"   type="textarea" filterable clearable  class="input-with-select"  style="width: 1009px;"></el-input>
                    </el-form-item>   
                     <el-button type="primary"  plain   icon="el-icon-edit"   @click="translate">翻译标题</el-button>             
                </div>           
                <div>
                    <el-form-item prop="title" label="商品标题"   label-width="80px" label-position="right">
                            <el-input v-model="createForm.title"   type="textarea" filterable clearable  class="input-with-select" ></el-input>
                    </el-form-item>   
                </div>
                <div>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item prop="shop_id" label="上架店铺" label-width="80px" label-position="right">
                                <el-select v-model="createForm.shop_id" placeholder="请选择上架的店铺" filterable clearable    @change="getShoplist" >
                                    <el-option v-for="(item,index) in shoplist" :key="item.id" :label="item.name" :value="item.id"   >
                                    </el-option>
                                </el-select>
                            </el-form-item>                           
                        </el-col>
                         <el-col :span="7">
                            <el-form-item prop="measures" label="销售单位" label-width="80px" label-position="right">
                                <el-select v-model="createForm.measures" placeholder="请选择销售单位" filterable clearable   >
                                    <el-option v-for="(item,index) in measures" :key="item.id" :label="item.cname" :value="item.id"   >
                                    </el-option>
                                </el-select>
                            </el-form-item>                              
                        </el-col>
                         <el-col :span="7">
                           <el-form-item prop="logistice_id" label="物流模板" label-width="80px" label-position="right">
                                <el-select v-model="createForm.logistice_id" placeholder="请选择物流模板" filterable clearable   >
                                    <el-option v-for="(item,index) in logistice_template" :key="item.id" :label="item.name" :value="item.id"   >
                                    </el-option>
                                </el-select>
                            </el-form-item>                          
                        </el-col>
                       
                    </el-row>
                </div>
                   <div>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item prop="site" label="销售站点" label-width="80px" label-position="right">
                                <el-select v-model="createForm.site" placeholder="请选择销售站点" filterable clearable  >
                                    <el-option v-for="item in countrys" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>                           
                        </el-col>
                         <el-col :span="7">
                           <el-form-item prop="catego_id" label="产品类目" label-width="80px" label-position="right">
                                <el-cascader v-model="createForm.catego_id" :options="options"  filterable clearable    @change="getCategolist"></el-cascader>                               
                            </el-form-item>                              
                        </el-col>
                         
                    </el-row>
                </div>
                  <div >                 
                     <el-form-item label="关键字"  label-width="80px" label-position="right">              
                        <el-row :gutter="23" >                               
                            <el-col :span="8"  >
                                <el-input v-model="createForm.keyWord1" style="width: 192px" placeholder="请选择关键字1"></el-input>
                            </el-col> 
                            <el-col :span="8"  >
                                <el-input v-model="createForm.keyWord2"   placeholder="请选择关键字2" style="width: 192px; margin-left: 76px" ></el-input>
                            </el-col>  
                            <el-col :span="8"  >
                                <el-input v-model="createForm.keyWord3"   placeholder="请选择关键字3"  style="width: 192px;margin-left: 154px;" ></el-input>
                            </el-col>    
                        </el-row>                        
                
                    </el-form-item>
                </div>           
                  <div >                 
                     <el-form-item label="卖点&特性"  label-width="80px" label-position="right">              
                        <el-row :gutter="23" >                               
                            <el-col :span="8"  >
                                <el-input v-model="createForm.shortDesc" style="width: 192px" placeholder="请选择卖点&特性"></el-input>
                            </el-col> 
                            <el-col :span="8"  >
                                <el-input v-model="createForm.shortDesc1"   placeholder="请选择卖点&特性" style="width: 192px; margin-left: 76px" ></el-input>
                            </el-col>  
                            <el-col :span="8"  >
                                <el-input v-model="createForm.shortDesc2"   placeholder="请选择卖点&特性"  style="width: 192px;margin-left: 154px;" ></el-input>
                            </el-col>                         
                        </el-row>                        
                
                    </el-form-item>
                </div>           
                 <div>
                     <el-card  style=" width: 90.5%;margin-left: 67px;"  shadow="hover" >              
                           <el-button size="mini"  plain   icon="el-icon-plus" @click="getPriceRange()">查看产品区间价格</el-button>   
                        </el-card> 
                 </div>
                <div v-if="attributeinfoVisible" style="width: 1190px;">                 
                    <div label="产品属性"  label-position="left" class="select-with-select">
                        <el-card  style=" width: 100%;margin-top: 5px;margin-left: 72px;" v-for="(item,index) in attributeinfos"   shadow="hover" >     
                            <el-row :gutter="10">
                                    <el-col :span="21"  >
                                        <el-row  style="margin-left: 20px;" v-if="item.type==1" >                                                  
                                            <el-col>   
                                                <el-form-item  :prop="`attributeinfos.${item.lineAttrname}`" :label="item.lineAttrnameCn">                                                
                                                  
                                                        <el-checkbox-group v-model="createForm['attributeinfos'][item.lineAttrname]"  >
                                                              <el-checkbox :label="`${item1.id}|${item1.name}|${item.attrId}||${item.saleattr}`" v-for="(item1,index1) in (item.values || [])" >{{item1.name}}</el-checkbox>                                            
                                                      </el-checkbox-group>                                                 
                                                </el-form-item>
                                            </el-col>     
                                        </el-row>  
                                       <el-row  style="margin-left: 50px; width: 1009px;" v-if="item.type==2" >
                                            <el-col :span="20"    >   
                                                 <el-form-item  :prop="`attributeinfos.${item.lineAttrname}`" :label="item.lineAttrnameCn">        
                                                    <el-select v-model="createForm['attributeinfos'][item.lineAttrname]"   filterable clearable  >
                                                        <el-option v-for="item1 in item.values" :key="item1.id" :label="item1.name" :value="`${item1.id}|${item1.name}|${item.attrId}|${item.saleattr}`">
                                                        </el-option>
                                                    </el-select>
                                                 </el-form-item>
                                            </el-col>   
                                        </el-row>    
                                        <el-row  style="margin-left: 50px; width: 1009px;" v-if="item.type==4" >
                                            <el-col :span="20"  >
                                                    <el-form-item :prop="`attributeinfos.${item.lineAttrname}`" :label="item.lineAttrnameCn" >
                                                     <el-input v-model="createForm['attributeinfos'][item.lineAttrname]" filterable clearable style="width: 200px;" ></el-input>  
                                                </el-form-item>
                                            </el-col>   
                                        </el-row>      
                                        
                                           <el-row  style="margin-left: 50px; width: 1009px;" v-if="item.type==5" >
                                            <el-col :span="20"  >
                                                  <el-form-item  :prop="`attributeinfos.${item.lineAttrname}`" :label="item.lineAttrnameCn">   
                                                                 <el-input v-model="createForm['attributeinfos'][item.lineAttrname]" type="number" filterable clearable ></el-input>  
                                                 </el-form-item>
                                            </el-col>   
                                        </el-row>       
                                    </el-col>    
                                </el-row>                                                         
                        </el-card> 
                        <!-- <el-card  style=" width: 92%;margin-top: 5px;margin-left: 72px;"  shadow="hover" >              
                           <el-button type="primary"  plain   icon="el-icon-plus" onclick="">自定义</el-button>   
                        </el-card>  -->
                    </div>               
                </div>           
                
                <div v-if="PriceVisible">                 
                    <el-form-item label-width="80" prop="content" label="自定义规格"  label-position="left" class="select-with-select">
                        <el-table  :data="tableData"     :span-method="objectSpanMethod"  class="input-with-select"  border>  
                           
                            <el-table-column  prop="color"    label="颜色"  width="180" >  
                                <template v-slot="{row}">
                                    {{row.color}}({{row.option1_en}})
                                </template>
                              </el-table-column>
                            <el-table-column  prop="size"      label="尺寸"  width="180"   v-if="hasSizeData"> 
                                <template v-slot="{row}">
                                    {{row.size}}({{row.option2_en}})
                                </template>
                            </el-table-column>
                            <el-table-column  prop="img"      label="图片"  width="180"> 
                                <template v-slot="{row}">
                                    <el-image :preview-teleported="true" :z-index="999999" :src="row.img" style="width:50;height:50px" :preview-src-list="[row.img]"   referrerpolicy="no-referrer"  /></el-image>
                                </template>
                            </el-table-column>                           
                            <el-table-column  prop="price"      label="采购价格(单位：人名币)"  width="180"> </el-table-column>
                            <el-table-column  prop="sell_price"      label="售卖价格(单位：美元)"  width="180">
                                 <template v-slot="{row}">
                                    <el-input v-model="row.sell_price"  type="number" style="width: 80%;" ></el-input>/件
                                </template>
                            </el-table-column>
                            <el-table-column  prop="address"   label="备货数量">  
                                 <template v-slot="{row}">
                                    <el-input v-model="row.number"  type="number"  style="width: 80%;"  ></el-input>件
                                </template>
                            </el-table-column>
                            <el-table-column  fixed="right" label="操作" width="120">
                                <template v-slot="{row}">
                                    <el-button type="danger"  plain  icon="el-icon-delete"  @click="objectSpandelete(row)" >删除 </el-button>
                                               
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item> 
                                     
                </div>   
                <!-- 产品区间价格 -->
                <el-dialog  width="60%" title="产品区间价格"  :visible.sync="innerVisible"    :close-on-click-modal="false"  append-to-body>
                   <div class="price-range"><span style="color: red;font-size: 16px;margin-left: 10px;">*</span>设置产品的区间价格(同步标准的批发区间到所有区域定价组)  
                    <el-card  style="margin-top: 10px;"  shadow="hover" >              
                           <el-button size="mini"  plain   icon="el-icon-plus" @click="batch">计算起批量的价格</el-button>   
                        </el-card>  </div>
                    <el-table :data="priceRange" width="80%"  class="priceRange_table" :show-header="false">
                        <el-table-column prop="num" label="姓名">                          
                               <template v-slot="{row}">
                                  <div style="padding-left: 53px;">
                                       购买 <el-input v-model="row.num"  type="number"  style="width: 30%;padding: 0 10px; "  ></el-input>件及以上时，
                                   </div>
                               </template>
                              
                        </el-table-column>
                        <el-table-column prop="discount" label="年龄">
                              <template #default="{ row, $index }">
                                 <div   v-if="$index !== 0" >
                                    预计收入降低<el-input v-model="row.discount"  type="number"  style="width: 40%;padding: 0 10px; "  ></el-input>%
                                 </div>
                                 <span v-else>为表格中填写的预计收入。</span>
                               </template>
                        </el-table-column>
                    </el-table>
              
                    <div style="margin-top: 50px;"> 
                        <el-form-item  label-position="left">
                            <el-button type="primary" size="medium" @click="priceRangeSubmits()">确认</el-button>
                        </el-form-item>  
                    </div>                     
                    <el-dialog  width="60%" title="计算起批量的价格"  :visible.sync="priceVisiblesync"    :close-on-click-modal="false"  append-to-body>                         
                            <el-form :inline="true" :model="priceFrom" size="mini"      :popper-append-to-body="false"  >                                   
                                <el-form-item label="重量(单位：g)"  label-width="150px" label-position="right">              
                                    <el-input  type="number" v-model="priceFrom.weight" placeholder="请输入重量" clearable filterable></el-input>                             
                                </el-form-item>
                                <el-form-item label="利润"  label-width="150px" label-position="right">              
                                    <el-input  type="number" v-model="priceFrom.profit" placeholder="请输入利润(如：想要利润30%，就填写30)" clearable filterable></el-input>                             
                                </el-form-item>
                                    <el-form-item >              
                                    <el-button type="primary" @click="batchesubmits()">计算起批量</el-button>                            
                                </el-form-item>
                            </el-form>     
                            <div class="flex align-center mb-11"> <span class="ml-7 fs-20" >颜色备注：</span><div class="ml-7 fs-15"> 超过了2000g,颜色变成蓝色</div><div class="blue_color"></div><div class="ml-7 fs-15"> 超过了5000g,颜色变成黄色</div><div class="yellow_color"></div><div class="ml-7 fs-15"> 超过了21kg,颜色变成红色</div><div class="red_color"></div></div>                              
                            <el-table :data="priceBatche" width="80%"  border="" :row-style="rowStyle"  @selection-change="batcheSelectionChange"  >
                                <el-table-column  type="selection"  width="55"></el-table-column>
                                <el-table-column prop="num" label="起批量"> 
                                    <template v-slot="{row}">
                                        <el-input type="number" v-model="row.num" :min="1" style="width: 170px;" @change="batchesubmits"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="price" label="价格(单位:美元)"></el-table-column>
                                <el-table-column prop="discount" label="折扣率">
                                     <template v-slot="{row, $index}">
                                        <!-- 第一行不显示百分号 -->
                                        <span v-if="$index === 0">{{ row.discount }}</span>
                                        <span v-else>{{ row.discount }}%</span>
                                    </template>
                                </el-table-column>
                            </el-table>     
                            <div style="margin-top: 50px;"> 
                                <el-form-item  label-position="left">
                                    <el-button type="primary" size="medium" @click="batcheRangeSubmits()">确认</el-button>
                                </el-form-item>  
                            </div> 
                    </el-dialog>

                </el-dialog>
         
                <div >                                
                    <el-form-item  label-position="left">
                        <el-button type="primary" @click="checkSubmits">确认上架</el-button>
                        <el-button type="primary" plain @click="close"> 取消</el-button>
                    </el-form-item>  
                </div>              
            </el-form>
        </el-dialog>
           
        
</div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                    return {   
                        chaintitle:'',//中文标题    
                        title:'',
                        tableData:[],//价格类别数据
                         colors: [],//颜色列表
                         PriceVisible:false,//控制价格
                        attributeinfoVisible:false,//控制属性
                        firstLevelIndexArr: [], // 一个空的数组，用于存放第一列每一行记录的合并数  控制第一列的合并
                        firstLevelIndexPos: 0, // firstLevelIndexArr 的索引
                        islistVisible :false,
                        priceVisiblesync:false,
                        multipleSelection:[],
                        batchemultipleSelection:[],//批量价格
                        shoplist:{$shoplist|raw},
                        logistice_template:[],//运费模板
                        options:{},//产品分类                     
                        measures:{$measures|raw},//产品单位
                        countrys:{$countrys|raw},//国家
                        innerVisible:false,//控制弹窗
                        attributeinfos:[],//选中的产品属性  
                        attributeinfo:[],//自定义的产品属性    
                        priceRange:[],//区间价格      
                        priceBatche:[],//起批量的价格        
                        createForm:{
                            measures:3,
                            site:208,
                            logistice_id:'',
                            shop_id:'',
                            title:'',   
                            catego_id:[],                    
                            sell_price:'',
                            product_id:'',                         
                            keyWord1:'',
                            keyWord2:'',
                            keyWord3:'',
                            shortDesc:'',
                            shortDesc1:'',
                            shortDesc2:'',
                            attributeinfos: {}
                          
                         },
                        searchForm:{   
                            localsku:'',     
                            site:'', 
                            status:'',    
                            shop_id:'',    
                            pagesize:20,
                            pagenum:1, 
                        } , //搜索条件
                        status:[                   
                            {
                                value: 1,
                                label: '上架'
                            },
                            {
                                value: 2,
                                label: '下架'
                            },
                        ],// 状态是否正常              
                      
                        total:0,   //分页总页数      
                        tablelist:[] ,              
                        filterParams: { 
                            'status':{"visible": true,"name": "是否上下架"},                        
                            "img":{"visible": true,"name": "商品图片"},
                            "localsku":{"visible": true,"name": "本地款号"},
                            "name_en":{"visible": true,"name": "商品英文名称"},
                            "title":{"visible": true,"name": "商品标题"},
                            "shop_name":{"visible": true,"name": "上架店铺"},
                            "site":{"visible": true,"name": "产品销售站点"},            
                            "createtime":{"visible": true,"name": "上架时间"},
                            "price":{"visible": true,"name": "一档价"}                         

                        },
                        islistProductbuterules:{
                         shop_id:[
                               { required: true, message: '请选择上架的店铺', trigger: 'blur' }
                            ],
                            title:[
                               { required: true, message: '商品名称不能为空', trigger: 'blur' }
                            ],
                            logistice_id:[
                                { required: true, message: '请选择物流模板', trigger: 'blur' } 
                            ],
                            site:[
                                { required: true, message: '请选择销售站点', trigger: 'blur' } 
                            ],
                            catego_id:[
                                { required: true, message: '请选择产品类目', trigger: 'blur' } 
                            ],
                            measures:[
                                { required: true, message: '请选择产品单位', trigger: 'blur' } 
                            ]                         
                        },
                        price:'',//1688这里产品价格
                        //起批量的价格
                        priceFrom:{
                            profit:'',
                            price:'',
                            weight:'',
                        }
                    }
            },
            mounted(){  
                  
                 if(localStorage.getItem("filterParams")) {
                    let saveData = JSON.parse(localStorage.getItem("filterParams"));

                    for(let key in this.filterParams){
                        if(saveData[key]){
                            this.filterParams[key] = saveData[key];
                        }
                    }
                }  
                this.getSearch()    
            },
            watch:{
                filterParams: {
                    handler() {
                        localStorage.setItem("filterParams", JSON.stringify(this.filterParams))
                    },
                    deep: true,
                }
            },
             computed: {
                // 检查是否有尺寸数据
                hasSizeData() {
                    return this.tableData.some(item => item.size && item.size.trim() !== '');
                }
            },
            methods: {       
            
              // 动态设置行样式
                rowStyle({ row, rowIndex }) {
                    let style = {};       
                        if(row.color_change==1){
                            style = { backgroundColor: '#c6e8ff', color: '#333' }; // 蓝色
                        }else if(row.color_change==2){
                              style = { backgroundColor: '#faecd8', color: '#333' }; // 黄色
                        }else if(row.color_change==3){
                              style = { backgroundColor: '#fde2e2', color: '#333' }; // 红色
                        }   
                
                    return style;           
                },

                async getDatalist() {
                     let loading = this.$loading({
                        lock: true,
                        text: '数据获取···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });  
                    const res = await axios.post('/admin/products/shelves', {params: this.searchForm})
                    loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.total = res.info.total
                    this.tablelist = res.info.list
                },
                    
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },
                handleSelectionChange(val) {
                    this.multipleSelection =val;
                    //.filter((v)=>v.status===0).map((v)=>v.id)                   
                },     
                //起批量的价格操作
                batcheSelectionChange(val){
                    this.batchemultipleSelection =val;
                },
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },
            
                //删除
                cancel($id){
                    this.$confirm('确认需要删除？删除了无法恢复', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                        type: 'warning'
                    }).then(() => {
                        axios.post('/admin/products/attribute_delete', {params: {id: $id}}).then(res => {
                            if (res.status !== 1) {
                                return this.$message.error(res.info);             
                            }                    
                            this.$message.success('删除成功');
                            this.getDatalist()
                        }).catch(err => {
                            console.log(err)
                        })
                    }).catch(() => {
                        this.$message.info('已取消');
                    });
               },
                
                //下架
                shelf(row){
                    let ids = this.multipleSelection.filter((v)=>v.status===1).map((v)=>v.id)
                    if(ids.length <=0){
                        this.$message.error('请选择需要上架的商品');
                        return;
                    }
                        
                },
                //上架
                 async listing(row){                    
                     this.title = '商品上架' ;            
                     this.attributeinfos=[]
                     this.options=[];
                     this.createForm.shop_id='';                  
                     this.createForm.title=row.name_en;
                     this.price =row.price;
                     this.chaintitle =row.title;
                     this.createForm.product_id=row.id;                 
                     this.islistVisible = true;
                     const res = await axios.post('/admin/products/features_selling_points_translate',{id:row.id })       
                     this.attributeinfo=res.info.datail[0]
                  
                     this.createForm.keyWord1=res.info.keywords;
                     this.createForm.keyWord2=res.info.keywords1;
                     this.createForm.keyWord3=res.info.keywords2;
                     this.createForm.shortDesc=res.info.shortdesc1;
                     this.createForm.shortDesc1=res.info.shortdesc2;
                     this.createForm.shortDesc2=res.info.shortdesc3;   
                      this.createForm.attributeinfos={}  
                      this.createForm.catego_id=[]      
                     this.generateCombination()
                    
                },
                //批量上架
                batchlisting(){  
                    this.title = '商品上架'
                
                     let ids = this.multipleSelection.filter((v)=>v.status===0 || v.status===2).map((v)=>v.id)
                     if(ids.length <=0){
                         this.$message.error('请选择需要上架的商品');
                         return;
                     }
                     this.islistVisible = true
                     this.createForm.ids = ids;
                     this.createForm.status = 1;                   
                   
                },
                //默认自定义数据 
                 generateCombination(){
                      //组装数据    
                       let attrids=[];           
                    this.tableData = []  
                       
                    this.attributeinfo.forEach((category,index) => {
                                          console.log(category)                              
                        this.tableData.push({
                                attrid:1000+index,
                                dh_img:category['dh_img'],
                                color: category['option1'],
                                option1_en: category['option1_en'],
                                option2_en: category['option2_en'],
                                price: this.price,
                                number:9999,  
                                sizeSpecTyp:3,
                                img:category['img'],  
                                sell_price:'',  
                                size: category['option2']
                        })                        
                    })  
                    this.attributeinfos.forEach((v)=>{
                         console.log(v)
                        if(v.lineAttrname=='Color' && v.required){
                             
                            this.tableData=[]
                        }
                    })     
                  
                    this.firstLevelIndex(this.tableData);
                 } , 

              // firstLevelIndex来存放要合并的格数，同时还要设定一个变量firstLevelIndexPos来记录
                   
                firstLevelIndex(tableData){
                 this.firstLevelIndexArr = [];
                    for (let i = 0; i <   tableData.length; i++) {
                        if (i === 0) {
                            this.firstLevelIndexArr.push(1);
                            this.firstLevelIndexPos = 0;
                        } else {
                            // 判断当前元素与上一个元素是否相同(第1和第2列)
                            if (tableData[i].color ===   tableData[i - 1].color) {
                                this.firstLevelIndexArr[this.firstLevelIndexPos] += 1;
                                this.firstLevelIndexArr.push(0);
                            } else {
                                this.firstLevelIndexArr.push(1);
                                this.firstLevelIndexPos = i;
                            }
                        }
                    }   
                },
               //按行合并
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex === 0) {
                        const _row = this.firstLevelIndexArr[rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        return {
                            rowspan: _row,
                            colspan: _col,
                        };
                    }
                },
                //执行上架
                async checkSubmits(){           
       
                    this.$refs.refeditForm.validate(async valid => {
                    if (!valid) return
                        let loading = this.$loading({
                            lock: true,
                            text: '数据修改中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                    
                        let price_data = {};  
                 
                        price_data['attrid']=this.tableData
                          
                        axios.post('/admin/products/product_listing', {
                            ...this.createForm,                      
                            ...price_data                        

                        }).then(res => {
                            loading.close()
                            if (res.status !== 1) {
                                return this.$message.error(res.info);                  
                            }                        
                            this.$message.success('商品发布成功');
                            this.islistVisible = false
                            this.getDatalist()
                        }).catch(err => {
                            console.log(err)
                        })

                    })  
                
                } ,
                //关闭弹窗
                close(){
                    this.isattributeVisible=false  
                },  
               //获取类目列表
               async  getCateList(row){
                   let loading = this.$loading({
                        lock: true,
                        text: '数据加载···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });   
                  const res = await axios.post('/admin/products/product_list',{type:6,shop_id:row})     
                   loading.close();
                   if (res.status !== 1) {
                      return  this.$message.error(res.info);             
                   }
                   this.options = res.info;
                 
                },
                //通过店铺获取到运费模板id 
                async  getShoplist(row){            
                    const res = await axios.post('/admin/Logistics/logistice_template_list',{shop_id:row})                         
                    if (res.status !== 1) {
                        return  this.$message.error(res.info);             
                    }
                    this.getCateList(row)//获取类目列表
                    this.logistice_template = res.info.list;  
                    this.createForm.logistice_id=res.info.shippingmodelid                
                },
                //通过类目id获取属性
                async  getCategolist(row){  
                     
                    if(row.length>0)   {
                      const res = await axios.post('/admin/Products/attribute_info',{catepubid:row})                         
                    if (res.status !== 1) {
                        return  this.$message.error(res.info);             
                    }      
                      this.createForm.attributeinfos={} 
                     
                    this.attributeinfos = res.info.list
                    this.PriceVisible = true;//自定义是否显示
                    this.generateCombination()   
                    res.info.list.forEach((v) => {
                        if(v.type == 1) {
                            // this.$set(this.createForm, v.lineAttrname, [])
                            this.$set(this.createForm.attributeinfos, v.lineAttrname, [])
                        }
                       
                        if(v.required) {
                            this.islistProductbuterules[`attributeinfos.${v.lineAttrname}`] = [{ required: true, message: '此项为必填项', trigger: 'blur' }]
                         
                        }
                    })
                  
                    // this.createForm.keyWord1=res.info.list[0].pubname     
                    this.attributeinfoVisible = true;
                    }else{
                       this.attributeinfoVisible = false;
                      this.attributeinfos='';
                       this.createForm.keyWord1='';
                    } 
                },
                //查看的产品区间价值
                async  getPriceRange(){  
               
                    if(this.createForm.shop_id==""){
                         this.$message.error('请先选择店铺');return;
                    }
                     if(this.createForm.catego_id.length<=0){
                         this.$message.error('请先选择类目');return;
                    }
                    // const res = await axios.post('/admin/Products/product_list',{shop_id:this.createForm.shop_id,type:4,product_id:this.createForm.product_id})                         
                    // if (res.status !== 1) {
                    //     return  this.$message.error(res.info);             
                    // }      
                    // this.priceRange = res.info;
                    this.innerVisible = true;
                },
                //修改产品区间价值
                async  priceRangeSubmits(){  
                    if(this.createForm.catego_id.length<=0){
                         this.$message.error('请先选择类目');return;
                    }
                    if(this.createForm.shop_id==""){
                         this.$message.error('请先选择店铺');return;
                    }
                   const res = await axios.post('/admin/Products/price_range',{shop_id:this.createForm.shop_id,product_id:this.createForm.product_id,priceRange:this.priceRange})                         
                    if (res.status !== 1) {
                        return  this.$message.error(res.info);             
                    }  
                    this.innerVisible =false;
                },
                //fanyi
                async  translate(){  
                    const res = await axios.post('/admin/Products/translates',{title:this.chaintitle})   
                    if (res.status !== 1) {
                        return  this.$message.error(res.info);             
                    } 
                    this.createForm.title=res.info;
                    this.$message.success('翻译成功');
                },
                //预测起批量
                batch(){
                    this.priceFrom.price=this.price,
                    this.priceFrom.profit='',
                    this.priceFrom.weight='',
                    this.priceFrom.catego_id=this.createForm.catego_id
                    this.priceBatche=[],
                      this.priceVisiblesync = true;
                },
                //批量预测
                async batchesubmits(){  
                      const res = await axios.post('/admin/Products/batch',{params:this.priceFrom,priceBatche:this.priceBatche})  
                       if (res.status !== 1) {
                        return  this.$message.error(res.info);             
                    } 
                    this.priceBatche=res.info;                       
                },
                //批量预测确认
                batcheRangeSubmits(){
                     if(this.batchemultipleSelection.length!==4){
                        return this.$message.error('请选择4预测结果哈');
                     }
              
                 // 按num升序排序二维数组
                      this.batchemultipleSelection=  this.batchemultipleSelection.sort((a, b) => {
                        // 获取每个子数组的第一个元素的num值进行比较                       
                        return a.num - b.num;
                        });
                        this.tableData = this.tableData.map(v => ({
                        ...v,
                        sell_price: this.batchemultipleSelection[0].price
                    }));             
                     this.priceRange=this.batchemultipleSelection
                     this.priceVisiblesync = false;
                },
                //删除属性规格
                objectSpandelete(item){
                       var index = this.tableData.indexOf(item)
                     console.log(index)
                    if (index !== -1) {                       
                        this.tableData.splice(index, 1)                     
                    }
                }                   
            }
            
        })
    </script>
 </body>  
</html>
